<template>
  <div id="privilege_manage" class="container">
    <div class="content">
      <!-- <div class="title">权限管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              placeholder="输入关键字进行过滤"
              suffix-icon="el-icon-search"
              v-model="filterText"
              clearable
              class="input_search"
            ></el-input>
             <el-select
              v-model="searchData.menuDimension"
              style="width:1.8rem;margin-left:0.2rem;float: left;"
              clearable
              @change="menuChange"
              placeholder="请选择权限维度"
            >
              <el-option v-for="(row,index) in menuDimenList" :key="index"  :label="row.name" :value="row.value" ></el-option>
            </el-select>
            <div class="toLeft" v-if="isShowDropConfirm">
              <el-button @click="cancle">重 置</el-button>
              <el-button style="margin-left:0.4rem" type="primary" @click="confirm">确 定</el-button>
            </div>
            <div class="right_btn" @click="openAdd" v-if="hasApi('sysRoleAdd')">新增一级权限</div>
          </div>
        </div>
        <!-- 内容-->
        <el-row style="margin-top:.2rem;">
          <el-row>
            <el-col :span="7">
              <div class="grid-content bg-purple">菜单名称</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">请求地址</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">类型</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">状态</div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">操作</div>
            </el-col>
          </el-row>
          <el-tree
            style="padding-left:0.5rem"
            :data="sysRoledata"
            :props="defaultProps"
            node-key="menuId"
            :expand-on-click-node="false"
            :default-expanded-keys="defaultExpandList"
            :filter-node-method="filterNode"
            :render-content="renderContent"
            ref="tree2"
            @node-drag-start="handleDragStart"
            @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave"
            @node-drag-over="handleDragOver"
            @node-drag-end="handleDragEnd"
            @node-drop="handleDrop"
            draggable
            :allow-drop="allowDrop"
            :allow-drag="allowDrag"
          ></el-tree>
        </el-row>
      </div>
    </div>
    <privilegeAdd ref="privilegeAdd" @callback="closeAdd"></privilegeAdd>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import privilegeAdd from "./subpage/privilege_add";
let vm;
let id = 1000;

export default {
  components: {
    privilegeAdd
  },
  data() {
    return {
      isShowDropConfirm: false,
      filterText: "",
      sysRoledata: [],
      defaultProps: {
        children: "list",
        label: "name"
      },
      defaultExpandList:[],
      searchData:{
        menuDimension:""
      },
      menuDimenList: [
        {
          value: 1,
          name: "系统级别"
        },
        {
          value: 2,
          name: "机构级别"
        },
        {
          value: 3,
          name: "校区级别"
        }
      ],
    };
  },

  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  methods: {
    menuChange(val){
      this.initData();
    },
    cancle() {
      this.isShowDropConfirm = false;
      this.initData();
    },
    confirm() {
      let paras = this.getList();
      api.sysRoleUpdateCal(paras).then(function(data) {
        console.log(data);
        vm.initData();
        vm.$message({
          message: "编辑菜单成功",
          type: "success"
        });
        // vm.getList();
      });
      vm.isShowDropConfirm = false;
    },
    handleDragStart(node, ev) {
      // 节点开始拖拽时触发的事件
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      // 拖拽进入其他节点时触发的事件
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // 拖拽离开某个节点时触发的事件
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）
    },
    /**
     * 获取所有权限的数组
     */
    getList() {
      var dataList = [];
      for (let i = 0; i < this.sysRoledata.length; i++) {
        // this.sysRoledata[i].orderNum = i;
        //获取第一级权限
        dataList.push({
          menuId: this.sysRoledata[i].menuId,
          parentId: this.sysRoledata[i].parentId,
          orderNum: i
        });
        let oneSysRoleData = this.sysRoledata[i];
        if (oneSysRoleData.list != null && oneSysRoleData.list.length > 0) {
          for (let a = 0; a < oneSysRoleData.list.length; a++) {
            //获取第二级权限
            dataList.push({
              menuId: oneSysRoleData.list[a].menuId,
              parentId: oneSysRoleData.list[a].parentId,
              orderNum: a
            });
            let twoSysRoleData = oneSysRoleData.list[a];
            if (twoSysRoleData.list != null && twoSysRoleData.list.length > 0) {
              for (let b = 0; b < twoSysRoleData.list.length; b++) {
                //获取第三级权限
                dataList.push({
                  menuId: twoSysRoleData.list[b].menuId,
                  parentId: twoSysRoleData.list[b].parentId,
                  orderNum: b
                });
                let threeSysRoleData = twoSysRoleData.list[b];
                if (
                  threeSysRoleData.list != null &&
                  threeSysRoleData.list.length > 0
                ) {
                  for (let c = 0; c < threeSysRoleData.list.length; c++) {
                    //获取第四级权限
                    dataList.push({
                      menuId: threeSysRoleData.list[c].menuId,
                      parentId: threeSysRoleData.list[c].parentId,
                      orderNum: c
                    });
                  }
                }
              }
            }
          }
        }
      }
      return dataList;
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //拖拽结束时（可能未成功）触发的事件
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //拖拽成功完成时触发的事件
      if (dropType == "inner") {
        draggingNode.data.parentId = dropNode.data.menuId;
      } else {
        if (draggingNode.data.parentId != dropNode.data.parentId) {
          draggingNode.data.parentId = dropNode.data.parentId;
        }
      }
      this.isShowDropConfirm = true;
    },
    allowDrop(draggingNode, dropNode, dropType) {
      //拖拽类型为插入
      if (dropType == "inner") {
        //判断拖拽目标节点是否为接口
        if (dropNode.data.type == 2) {
          return false;
        }
        //判断拖拽节点是目录 目标节点为页面
        if (draggingNode.data.type == 0 && dropNode.data.type == 1) {
          return false;
        }
        //判断拖拽节点是页面 目标节点为页面
        if (draggingNode.data.type == 1 && dropNode.data.type == 1) {
          return false;
        }
        //判断拖拽节点是接口 目标节点为接口
        if (draggingNode.data.type == 2 && dropNode.data.type == 0) {
          return false;
        }
      }
      //当目标节点的级别为一级时
      if (dropNode.level == 1) {
        //拖拽类型为插入时
        if (dropType == "inner") {
          //目标节点为目录
          if (dropNode.data.type == 0) {
            //拖拽节点为接口
            if (draggingNode.data.type == 2) {
              return false;
            }
            //拖拽节点为目录
            if (draggingNode.data.type == 0) {
              if (this.getStatus(draggingNode)) {
                return false;
              }
            }
          }
          //目标节点为页面
          if (dropNode.data.type == 1) {
            //拖拽节点为接口
            if (draggingNode.data.type != 2) {
              return false;
            }
          }
        } else {
          //拖拽类型为其他放置位置 拖拽节点为接口
          if (draggingNode.data.type == 2) {
            return false;
          }
        }
      }
      //当拖拽目标节点的级别为二级时 同上判断
      if (dropNode.level == 2) {
        if (dropType == "inner") {
          if (dropNode.data.type == 0) {
            if (draggingNode.data.type != 1) {
              return false;
            }
          }
          if (dropNode.data.type == 1) {
            if (draggingNode.data.type != 2) {
              return false;
            }
          }
          if (dropNode.data.type == 2) {
            return false;
          }
        } else {
          //拖拽类型为其他时拖拽节点的层级不能大于3
          if (dropNode.data.type == 0 || dropNode.data.type == 1) {
            if (draggingNode.data.type == 2) {
              return false;
            }
            if (draggingNode.data.type == 0) {
              if (this.getStatus(draggingNode)) {
                return false;
              }
            }
          }
          if (dropNode.data.type == 2) {
            if (draggingNode.data.type != 2) {
              return false;
            }
          }
        }
      }
      //当拖拽目标节点的级别为三级时 同上判断
      if (dropNode.level == 3) {
        //拖拽类型为插入时拖拽节点的层级不能大于1
        if (dropType == "inner") {
          if (dropNode.data.type == 2) return false;
          if (dropNode.data.type == 1) {
            if (draggingNode.data.type != 2) {
              return false;
            }
          }
        } else {
          //拖拽类型为其他时拖拽节点的层级不能大于2
          if (dropNode.data.type == 2) {
            if (draggingNode.data.type != 2) {
              return false;
            }
          }
          if (dropNode.data.type == 1) {
            if (draggingNode.data.type != 1) {
              return false;
            }
          }
        }
      }
      //当拖拽目标节点的级别为四级时
      if (dropNode.level == 4) {
        //拖拽类型为插入时不能插入
        if (dropType == "inner") {
          // this.$message.error("该权限不能插入到目标权限中");
          return false;
        } else {
          //拖拽类型为其他时拖拽节点的层级不能大于1
          if (draggingNode.data.type != 2) {
            return false;
          }
        }
      }
      return true;
    },
    /**
     * 判断子节点是否为目录
     */
    getStatus(node) {
      if (node.childNodes.length > 0) {
        for (let i = 0; i < node.childNodes.length; i++) {
          if (node.childNodes[i].data.type == 0) {
            return true;
          }
        }
      }
      return false;
    },
    /**
     * 判断节点能否被拖拽
     */
    allowDrag(draggingNode) {
      return true;
    },

    /**
     * 初始化数据
     */
    initData() {
      api.sysRoleList(vm.searchData).then(function(data) {
        // console.log(data);
        vm.sysRoledata = data.menuList;
        // vm.getList();
      });
    },
    /**
     * 新增
     */
    openAdd() {
      vm.$refs.privilegeAdd.init({ parentId: 0 });
    },
    /**
     * 关闭新增
     */
    closeAdd(data) {
      console.log(data);
      this.initData();
    },
    /**
     * 过滤数据
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    append(data) {
      console.log(data);
      vm.defaultExpandList=[data.menuId];
      vm.$refs.privilegeAdd.init({ parentId: data.menuId ,type:data.type,menuDimensionList:data.menuDimensionList});
    },
    update(data) {
      vm.defaultExpandList=[data.menuId];
      vm.$refs.privilegeAdd.init(JSON.parse(JSON.stringify(data)));
    },
    remove(node, data) {
      vm.defaultExpandList=[data.menuId];
      this.$confirm("此操作将删除该权限菜单, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            menuIds: [data.menuId + ""]
          };
          api.sysRoleDetele(paras).then(function(data) {
            if (data.result == "操作成功") {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            }
          });
        })
        .catch(() => {});
    },
    look(data) {
      var look = JSON.parse(JSON.stringify(data));
      look.isShow = true;
      vm.$refs.privilegeAdd.init(look);
    },
    /**
     * 自定义节点样式
     */
    renderContent(h, { node, data, store }) {
      var systype = "";
      var str = "";
      var displayStr = "width:0.6rem;";
      if (data.type == 0) {
        systype = "导航";
        str =
          "width: 5%;background: #409EFF;border-radius: 5px;padding-left:0.06rem";
      } else if (data.type == 1) {
        systype = "页面";
        str =
          "width: 5%;background: #67C23A;border-radius: 5px;padding-left:0.06rem";
      } else {
        systype = "功能项";
        displayStr += "visibility:hidden;";
        str =
          "width: 7%;background: #E6A23C;border-radius: 5px;padding-left:0.07rem";
      }

      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;line-hight:0.55rem;hight:0.55rem;">
          <span>
            <span>{node.label}</span>
          </span>
          <span style="display: flex; align-items: center; justify-content: space-between;width:10rem">
            <span style="width: 42%;font-size:14px">
              <span>{data.url}</span>
            </span>
            <span style={str}>{systype}</span>
            <span style="width: 41%;padding-left:0.2rem">
              <el-switch
                value={data.showNav}
                style="width: 28%"
                onChange={function(val) {
                  let paras = data;
                  paras.showNav = val;
                  api.sysRoleUpdate(paras).then(function(data) {
                    if (data.result == "操作成功") {
                      vm.$message({
                        message: "编辑成功",
                        type: "success"
                      });
                    } else {
                      this.$message.error(data.result);
                    }
                  });
                }}
              />
              <el-button
                style={displayStr}
                type="text"
                on-click={() => this.append(data)}
              >
                新增
              </el-button>
              <el-button
                style="width:0.6rem;"
                type="text"
                on-click={() => this.update(data)}
              >
                编辑
              </el-button>
              <el-button
                style="width:0.6rem;"
                type="text"
                on-click={() => this.look(data)}
              >
                查看
              </el-button>
              <el-button
                style="color:red;width:0.6rem;"
                type="text"
                on-click={() => this.remove(node, data)}
              >
                删除
              </el-button>
            </span>
          </span>
        </span>
      );
    }
  },
  mounted() {
    vm = this;
    this.initData();
    vm.defaultExpandList=[];
  },
  computed: {}
};
</script>

<style lang="scss">
#privilege_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .toLeft{
    float: left;
    width: 3rem;
    margin-left: 0.5rem;
  }
  .input_search {
    float: left;
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-tree-node__content {
    height: 0.35rem;
  }
  .student_li {
    width: 100%;
    cursor: pointer;
    margin-top: 0.2rem;
    background: #ffffff;
    border-radius: 0.1rem;
    border: 1px solid #ededed;
    .li_body {
      width: 100%;
      padding: 0.12rem;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #d3dce6;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #d3dce6;
  }
  .grid-content {
    line-height: 0.5rem;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #d3dce6;
  }
  .el-button + .el-button {
    margin-left: 0rem;
  }
  .active {
    height: 1.7rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
  }
  .noShow {
    visibility: hidden;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.84rem;
}
</style>
